

<form id="join_form">
    <table width="100%" border="0" cellpang="0" cellspacing="0" class="left">
        <tr>
            <td  colspan="3" >&nbsp;
            </td>
        </tr>

        <tr>
            <td 
                class="center w_100">I D</td>
            <td  >&nbsp;
                <input type="text" id ="id" name="id" >
                <input type="button" value="중복확인" onclick="idCheck();"><span id="idInfo" style="color:red"></span> <br><br>
            </td>
            <td></td>
        </tr>
        <tr>
            <td 
                class="center w_100">닉네임</td>
            <td  >&nbsp;
                <input type="text" id ="nick_name" name="nick_name" >
                <input type="button" value="중복확인" onclick="nick_nameCheck();"><span id="nick_nameInfo" style="color:red"></span> <br><br>
            </td>
            <td></td>
        </tr>            
        <tr>
            <td 
                class="center w_100">비밀번호</td>
            <td  >&nbsp;
                <input type="password" id ="pass1" name="pass1" ><br><br>
            </td>
            <td></td>
        </tr>
        <tr>
            <td 
                class="center w_100">비밀번호 확인</td>
            <td  >&nbsp;
                <input type="password"  id ="pass2" name="pass2" > 영문+숫자<br><br>
            </td>
            <td></td>
        </tr>

        <tr>
            <td 
                class="center w_100" >이메일</td>
            <td  >&nbsp;
                <input type="text" id="email" name="email" > @
                <select class="w_100" name="email2" id="email2"   onchange="selectIndex();">
                    <option value="0" selected>도메인선택</option>
                    <option value="hanmail.net">hanmail.net</option>
                    <option value="naver.com">naver.com</option>
                    <option value="gmail.com">gmail.com</option>
                    <option value="yahoo.com">yahoo.com</option>  
                    <option value="empal.com">empal.com</option>                        
                    <option value="hitel.net">hitel.net</option>                        
                    <option value="nate.com">nate.com</option>                        
                    <option value="dreamwiz.com">dreamwiz.com</option>                        
                    <option value="hotmail.com">hotmail.com</option>     
                    <option value="lycos.co.kr">lycos.co.kr</option>        
                    <option value="paran.com">praran.com</option>                        
                    <option value="chollian.net">chollian.net</option>                        
                    <option value="1">직접입력</option>
                </select> 영문+숫자 <br><br>
            </td>
            <td></td>
        </tr>


        <tr>
            <td  colspan="3" >&nbsp;
            </td>
        </tr>
        <tr>

            <td colspan="3" align="center" class="padding" >

                <input type="image" src="<?= $FOLDER_PATH; ?>/img/bt_confirm.gif" value="등록" onClick="joinCheck();
                        return false;">

            </td>
        </tr>

    </table>
</form>







<script>
    //전역변수
    var addr;
    var checkId = false;
    var checkNick_name = false;

    //페이지 로딩되면 자동 실행
    $(document).ready(function () {
        // bbs.setInputType('handPhone', 1);  // 숫자만 입력
        bbs.setInputType('id', 2);  // 숫자 영어만 입력 한글 불가
        bbs.setInputType('email', 2);
        bbs.setInputType('email2', 2);

        if (!checkId) {
            $("#id").css("border", "1px solid red");
        }
        if (!checkNick_name) {
            $("#nick_name").css("border", "1px solid red");
        }
    });



    function idCheck() {
        var id = $("#id").val();
        var data = bbs.checkPage('<?= $PAGE_ID_CHECK_OK; ?>', id);
        // alert(data);

        if (data.status === "ID_NOT_EXIST") {
            checkId = true;
            $("#id").css("border", "1px solid blue");
            $("#idInfo").css("color", "blue");
            $("#idInfo").text(data.string);
        }
        else if (data.status === "STRING_TOO_SHORT") {
            checkId = false;
            $("#id").css("border", "1px solid red");
            $("#idInfo").css("color", "red");
            $("#idInfo").text(data.string);
        }
        else if (data.status === "ID_EXIST") {
            checkId = false;
            $("#id").css("border", "1px solid red");
            $("#idInfo").css("color", "red");
            $("#idInfo").text(data.string);
        }


    }
    function nick_nameCheck() {
        var id = $("#nick_name").val();
        var data = bbs.checkPage('<?= $PAGE_NICKNAME_CHECK_OK; ?>', id);
        // alert(data);

        if (data.status === "NICKNAME_NOT_EXIST") {
            checkNick_name = true;
            $("#nick_name").css("border", "1px solid blue");
            $("#nick_nameInfo").css("color", "blue");
            $("#nick_nameInfo").text(data.string);
        }
        else if (data.status === "STRING_TOO_SHORT") {
            checkNick_name = false;
            $("#nick_name").css("border", "1px solid red");
            $("#nick_nameInfo").css("color", "red");
            $("#nick_nameInfo").text(data.string);
        }
        else if (data.status === "NICKNAME_EXIST") {
            checkNick_name = false;
            $("#nick_name").css("border", "1px solid red");
            $("#nick_nameInfo").css("color", "red");
            $("#nick_nameInfo").text(data.string);
        }

    }

    function joinCheck() {
        if ($("#id").val() < 3) {
            alert("아이디는 최소 3자이상 입력해야 합니다.");
            $("#id").focus();
            return false;
        }
        if ($("#nick_name").val() < 2) {
            alert("닉네임은 최소 2자이상 입력해야 합니다.");
            $("#nick_name").focus();
            return false;
        }
        if (!checkId) {
            alert("아이디중복 체크를 해주세요.");
            $("#id").focus();
            return false;
        }
        if (!checkNick_name) {
            alert("닉네임 중복 체크를 해주세요.");
            $("#nick_name").focus();
            return false;
        }

        if ($("#pass1").val() < 3) {
            alert("비밀번호는 최소 3자이상 입력해야 합니다.");
            $("#pass1").focus();
            return false;
        }
        if ($("#pass1").val() !== $("#pass2").val()) {
            alert("비밀번호가 위와 다릅니다. 확인해주세요.");
            $("#pass2").focus();
            return false;
        }

        if ($("#email").val() < 2) {
            alert("이메일은 최소 2자이상 입력해야 합니다.");
            $("#email").focus();
            return false;
        }
        if ($('#email2 option:selected').val() === '0') {
            alert("이메일 뒷부분을 골라주세요");
            $("#email").focus();
            return false;
        }

        var join_form_serialize = $("#join_form").serialize();

        bbs.swapPage("<?= $PAGE_JOIN_OK; ?>" + "&" + join_form_serialize, "<?= $layer_id; ?>", function () {
            bbs.swapPage("<?= $PAGE_JOIN_END; ?>", "<?= $layer_id; ?>");
        }, "html", "", "<?= $_F->makeToken($SESSION_WRITE); ?>");
    }


    function selectIndex() {
        if ($('#email2 option:selected').val() === '1') {
            $("#email2").replaceWith("<input type='text' id='email2' name='email2' width=300>");
            bbs.setInputType('email2', 2);
            // 숫자와 영문만을 입력받기 위해 다시 한번 호출  로딩시 호출된것은 실행중 생성된 엘리먼트에 적용할수 없다.
        }
    }

</script>

